<!--
 * @Author: mia.chen mia.chen@webpowerchina.com
 * @Date: 2024-01-17 18:21:47
 * @LastEditors: mia.chen mia.chen@webpowerchina.com
 * @LastEditTime: 2024-01-18 10:35:03
 * @FilePath: \learn-project\src\components\icon.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    svgClass() {
      return ["iconfont", "icon-" + this.iconName, this.className];
    },
    symbolId() {
      return `#icon-${this.iconName}`;
    },
  },
};
</script>
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
